<script setup lang="ts">
defineProps({
    scale: {
        type: Number,
        default: 0,
    },
    center: {
        type: Object,
        default: {
            x: 0,
            y: 0,
            z: 0,
        },
    },
    drawingNumber: {
        type: String,
        default: '审图号：',
    },
})
</script>

<template>
    <div class="map-info top-ui">
        <div class="info-scale">
            <p>
                <span v-text="scale.toFixed(2)"></span>
                <span style="padding-left: 2px;">公里</span>
            </p>
            <div class="info-scale-symbol">
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div class="info-position">
            <span>经度：</span>
            <!--经纬度保留3位小数-->
            <span v-text="center.x?.toFixed(3)"></span>
            <span>纬度：</span>
            <span v-text="center.y?.toFixed(3)"></span>
            <span>高度：</span>
            <span v-text="center.z?.toFixed(3)"></span>
        </div>
        <div class="info-drawing-number" v-text="drawingNumber"></div>
    </div>
</template>

<style lang="scss" scoped>
// 地图信息
.map-info {
    display: flex;
    justify-content: flex-end;
    bottom: 0;
    left: 0;
    width: 100%;
    height: pxToVw(22);
    background: $app-bg-color;
    opacity: $app-bg-color-opacity;
    // 比例尺
    .info-scale {
        display: flex;
        align-items: center;

        // 比例尺符号
        .info-scale-symbol {
            display: flex;
            height: 100%;

            & > div:first-child {
                margin: 8px 0 5px 4px;
                border-right: 2px solid $app-font-color;
            }

            & > div:nth-child(2) {
                width: 37.795px; // 1厘米
                margin-bottom: 5px;
                border-bottom: 2px solid $app-font-color;
            }

            & > div:last-child {
                margin: 8px 0 5px 0;
                border-right: 2px solid $app-font-color;
            }
        }
    }

    // 位置
    .info-position {
        display: flex;
        justify-content: left;
        align-items: center;
        padding-left: pxToVw(18);

        & > span {
            text-align: left;
        }

        // 各信息边距
        & > span:nth-child(2n) {
            min-width: pxToVw(52);
            padding-left: pxToVw(2);
        }

        & > span:nth-child(2n+1) {
            padding-left: pxToVw(8);
        }
    }

    // 审图号
    .info-drawing-number {
        display: flex;
        align-items: center;
        padding-left: pxToVw(20);
        padding-right: pxToVw(28);
    }
}
</style>
